<template>
  <div class="zhuchi-container">
    <Header />
    <div class="management-main">
      <div class="left-nav">
        <a href="#" class="nav-item" @click.prevent="activeTab = 'memberManagement'" :class="{ 'active': activeTab === 'memberManagement' }">成员管理</a>
        <a href="#" class="nav-item" @click.prevent="activeTab = 'meetingManagement'" :class="{ 'active': activeTab === 'meetingManagement' }">部门会议</a>
        <a href="#" class="nav-item" @click.prevent="activeTab = 'talentPool'" :class="{ 'active': activeTab === 'talentPool' }">主持人才库</a>
        <a href="#" class="nav-item" @click.prevent="activeTab = 'personalCenter'" :class="{ 'active': activeTab === 'personalCenter' }">个人中心</a>
      </div>
      
      <div class="content-area">
        <!-- 成员管理 -->
        <div class="module-card" v-if="activeTab === 'memberManagement'">
          <div class="module-header">
            <h3>成员管理</h3>
            <button @click="showAddMemberDialog = true" class="btn-primary">添加成员</button>
          </div>
          
          <table class="data-table">
            <thead>
              <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>学院</th>
                <th>年级</th>
                <th>联系方式</th>
                <th>特长</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(member, index) in zhuchiMembers" :key="member.id">
                <td>{{ index + 1 }}</td>
                <td>{{ member.name }}</td>
                <td>{{ member.college }}</td>
                <td>{{ member.grade }}</td>
                <td>{{ member.phone }}</td>
                <td>{{ member.specialty }}</td>
                <td class="operation-buttons">
                  <button @click="handleView(member.id)" class="btn-view">查看</button>
                  <button @click="handleEdit(member)" class="btn-edit">编辑</button>
                </td>
              </tr>
              <tr v-if="zhuchiMembers.length === 0">
                <td colspan="7" class="no-data">暂无成员数据</td>
              </tr>
            </tbody>
          </table>
        </div>
        
        <!-- 部门会议 -->
        <div class="module-card" v-if="activeTab === 'meetingManagement'">
          <div class="module-header">
            <h3>部门会议</h3>
            <button @click="showAddMeetingDialog = true" class="btn-primary">新增会议内容</button>
          </div>
          
          <div class="meeting-actions">
            <button @click="downloadMeetingTemplate" class="btn-secondary">下载会议记录模板</button>
            <input 
              type="text" 
              v-model="meetingSearch" 
              placeholder="搜索会议标题"
              class="search-input"
            >
          </div>
          
          <div class="meeting-list">
            <div 
              v-for="meeting in filteredMeetings" 
              :key="meeting.id" 
              class="meeting-item"
            >
              <div class="meeting-header">
                <h4>{{ meeting.title }}</h4>
                <div class="meeting-meta">
                  <span>日期：{{ meeting.date }}</span>
                  <span>主持人：{{ meeting.host }}</span>
                  <span>参会人数：{{ meeting.attendeeCount }}</span>
                </div>
              </div>
              <div class="meeting-content">
                <p>{{ meeting.content.length > 100 ? meeting.content.slice(0, 100) + '...' : meeting.content }}</p>
              </div>
              <div class="meeting-operations">
                <button @click="handleViewMeeting(meeting)" class="btn-view">查看详情</button>
                <button @click="handleEditMeeting(meeting)" class="btn-edit">编辑</button>
              </div>
            </div>
            <div v-if="filteredMeetings.length === 0" class="no-data">暂无会议记录</div>
          </div>
        </div>
        
        <!-- 主持人才库 -->
        <div class="module-card" v-if="activeTab === 'talentPool'">
          <div class="module-header">
            <h3>主持人才库</h3>
            <button @click="showAddTalentDialog = true" class="btn-primary">添加人才</button>
          </div>
          
          <div class="talent-filters">
            <input 
              type="text" 
              v-model="talentSearch" 
              placeholder="搜索姓名或特长"
              class="search-input"
            >
            <select v-model="skillFilter" class="filter-select" @change="filterTalents">
              <option value="">全部特长</option>
              <option value="晚会主持">晚会主持</option>
              <option value="会议主持">会议主持</option>
              <option value="活动主持">活动主持</option>
              <option value="双语主持">双语主持</option>
            </select>
          </div>
          
          <div class="talent-grid">
            <div v-for="talent in filteredTalents" :key="talent.id" class="talent-card">
              <img :src="talent.avatar" alt="头像" class="talent-avatar">
              <h4>{{ talent.name }}</h4>
              <p class="talent-info">学院：{{ talent.college }}</p>
              <p class="talent-info">年级：{{ talent.grade }}</p>
              <p class="talent-info">特长：{{ talent.skills.join('、') }}</p>
              <div class="talent-actions">
                <button @click="handleEditTalent(talent)" class="btn-edit">编辑</button>
              </div>
            </div>
          </div>
          <div v-if="filteredTalents.length === 0" class="no-data">暂无人才数据</div>
        </div>
        
        <!-- 个人中心 -->
        <div class="module-card" v-if="activeTab === 'personalCenter'">
          <h3>个人中心</h3>
          <div class="profile-form">
            <div class="form-group">
              <label>姓名：</label>
              <input type="text" v-model="userProfile.name" class="form-control">
            </div>
            <div class="form-group">
              <label>学号：</label>
              <input type="text" v-model="userProfile.studentId" class="form-control" readonly>
            </div>
            <div class="form-group">
              <label>学院：</label>
              <input type="text" v-model="userProfile.college" class="form-control">
            </div>
            <div class="form-group">
              <label>联系电话：</label>
              <input type="text" v-model="userProfile.phone" class="form-control">
            </div>
            <div class="form-group">
              <label>个人简介：</label>
              <textarea v-model="userProfile.introduction" class="form-control" rows="4"></textarea>
            </div>
            <button @click="saveProfile" class="btn-primary">保存信息</button>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script setup>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const activeTab = ref('memberManagement')

// 成员管理相关
const members = ref([
  { id: 1, name: '张三', studentId: '2021001', college: '计算机学院', grade: '2021级', phone: '13800138001', specialty: '晚会主持', joinDate: '2021-09-01', remark: '经验丰富' },
  { id: 2, name: '李四', studentId: '2021002', college: '信息学院', grade: '2021级', phone: '13800138002', specialty: '会议主持', joinDate: '2021-09-01', remark: '' },
  { id: 3, name: '王五', studentId: '2022003', college: '软件学院', grade: '2022级', phone: '13800138003', specialty: '活动主持', joinDate: '2022-03-15', remark: '进步快' }
])

const zhuchiMembers = computed(() => {
  return members.value.filter(member => member.department !== undefined ? member.department === '主持队' : true)
})

const showAddMemberDialog = ref(false)
const showEditMemberDialog = ref(false)
const newMember = ref({ 
  name: '', 
  studentId: '', 
  college: '',
  grade: '',
  department: '主持队', 
  phone: '', 
  specialty: '',
  joinDate: '',
  remark: '' 
})
const editingMember = ref({})

// 部门会议相关
const meetings = ref([
  { 
    id: 1, 
    title: '新学期工作安排会议',
    date: '2023-09-01',
    host: '张三',
    attendees: ['张三', '李四', '王五'],
    attendeeCount: 3,
    location: '会议室A',
    content: '讨论了新学期的工作计划，包括招新安排、活动策划和日常管理等事宜。'
  },
  { 
    id: 2, 
    title: '主持技能培训安排',
    date: '2023-09-10',
    host: '李四',
    attendees: ['张三', '李四', '王五', '赵六'],
    attendeeCount: 4,
    location: '活动中心',
    content: '安排了本学期主持技能培训计划，包括发声训练、台风训练等内容。'
  }
])

const meetingSearch = ref('')
const filteredMeetings = computed(() => {
  return meetings.value.filter(meeting => 
    meeting.title.includes(meetingSearch.value)
  )
})

const showAddMeetingDialog = ref(false)
const showEditMeetingDialog = ref(false)
const showMeetingDetail = ref(false)
const currentMeeting = ref({})
const newMeeting = ref({
  title: '',
  date: '',
  host: '',
  attendees: [],
  attendeesStr: '',
  attendeeCount: 0,
  location: '',
  content: ''
})
const editingMeeting = ref({})

// 主持人才库相关
const talents = ref([
  { 
    id: 1, 
    name: '张三', 
    college: '计算机学院', 
    grade: '2021级', 
    skills: ['晚会主持', '活动主持'],
    experience: '主持过迎新晚会、元旦晚会等',
    avatar: '@/assets/logo.jpg'
  },
  { 
    id: 2, 
    name: '赵六', 
    college: '外国语学院', 
    grade: '2020级', 
    skills: ['双语主持', '会议主持'],
    experience: '主持过国际交流会议、英语演讲比赛等',
    avatar: '@/assets/logo.jpg'
  }
])

const talentSearch = ref('')
const skillFilter = ref('')
const filteredTalents = computed(() => {
  return talents.value.filter(talent => {
    const matchesSearch = talent.name.includes(talentSearch.value) || 
                         talent.skills.some(skill => skill.includes(talentSearch.value))
    const matchesSkill = !skillFilter.value || talent.skills.includes(skillFilter.value)
    return matchesSearch && matchesSkill
  })
})

const showAddTalentDialog = ref(false)
const showEditTalentDialog = ref(false)
const newTalent = ref({
  name: '',
  college: '',
  grade: '',
  skills: [],
  experience: '',
  avatar: ''
})
const editingTalent = ref({})

// 个人中心相关
const userProfile = ref({
  name: '',
  studentId: '',
  college: '',
  phone: '',
  introduction: ''
})

// 初始化个人信息
onMounted(() => {
  const savedProfile = localStorage.getItem('zhuchiMinisterProfile')
  if (savedProfile) {
    userProfile.value = JSON.parse(savedProfile)
  }
})

// 成员管理方法
const handleView = (id) => {
  router.push(`/buzhang/zhuchi/${id}`)
}

const handleEdit = (member) => {
  editingMember.value = { ...member }
  showEditMemberDialog.value = true
}

const addMember = () => {
  if (!newMember.value.name || !newMember.value.studentId || !newMember.value.phone) {
    alert('请填写必填字段')
    return
  }
  
  const newId = members.value.length > 0 
    ? Math.max(...members.value.map(m => m.id)) + 1 
    : 1
  
  members.value.push({
    id: newId,
    ...newMember.value
  })
  
  newMember.value = { 
    name: '', 
    studentId: '', 
    college: '',
    grade: '',
    department: '主持队', 
    phone: '', 
    specialty: '',
    joinDate: '',
    remark: '' 
  }
  showAddMemberDialog.value = false
}

const updateMember = () => {
  const index = members.value.findIndex(m => m.id === editingMember.value.id)
  if (index !== -1) {
    members.value[index] = { ...editingMember.value }
  }
  showEditMemberDialog.value = false
}

// 会议管理方法
const downloadMeetingTemplate = () => {
  alert('会议记录模板下载中...')
}

const handleViewMeeting = (meeting) => {
  currentMeeting.value = { ...meeting }
  showMeetingDetail.value = true
}

const handleEditMeeting = (meeting) => {
  editingMeeting.value = { ...meeting }
  editingMeeting.value.attendeesStr = meeting.attendees.join(',')
  showEditMeetingDialog.value = true
}

const addMeeting = () => {
  if (!newMeeting.value.title || !newMeeting.value.date || !newMeeting.value.host || !newMeeting.value.content) {
    alert('请填写必填字段')
    return
  }
  
  const attendees = newMeeting.value.attendeesStr ? newMeeting.value.attendeesStr.split(',').map(a => a.trim()) : []
  
  const newId = meetings.value.length > 0 
    ? Math.max(...meetings.value.map(m => m.id)) + 1 
    : 1
  
  meetings.value.push({
    id: newId,
    ...newMeeting.value,
    attendees,
    attendeeCount: attendees.length
  })
  
  newMeeting.value = {
    title: '',
    date: '',
    host: '',
    attendees: [],
    attendeesStr: '',
    attendeeCount: 0,
    location: '',
    content: ''
  }
  showAddMeetingDialog.value = false
}

const updateMeeting = () => {
  const attendees = editingMeeting.value.attendeesStr ? editingMeeting.value.attendeesStr.split(',').map(a => a.trim()) : []
  editingMeeting.value.attendees = attendees
  editingMeeting.value.attendeeCount = attendees.length
  
  const index = meetings.value.findIndex(m => m.id === editingMeeting.value.id)
  if (index !== -1) {
    meetings.value[index] = { ...editingMeeting.value }
  }
  showEditMeetingDialog.value = false
}

// 人才库管理方法
const handleEditTalent = (talent) => {
  editingTalent.value = { ...talent }
  editingTalent.value.skillsStr = talent.skills.join(',')
  showEditTalentDialog.value = true
}

const addTalent = () => {
  if (!newTalent.value.name || !newTalent.value.college || !newTalent.value.skillsStr) {
    alert('请填写必填字段')
    return
  }
  
  const skills = newTalent.value.skillsStr ? newTalent.value.skillsStr.split(',').map(s => s.trim()) : []
  
  const newId = talents.value.length > 0 
    ? Math.max(...talents.value.map(t => t.id)) + 1 
    : 1
  
  talents.value.push({
    id: newId,
    ...newTalent.value,
    skills
  })
  
  newTalent.value = {
    name: '',
    college: '',
    grade: '',
    skills: [],
    skillsStr: '',
    experience: '',
    avatar: ''
  }
  showAddTalentDialog.value = false
}

const updateTalent = () => {
  const skills = editingTalent.value.skillsStr ? editingTalent.value.skillsStr.split(',').map(s => s.trim()) : []
  editingTalent.value.skills = skills
  
  const index = talents.value.findIndex(t => t.id === editingTalent.value.id)
  if (index !== -1) {
    talents.value[index] = { ...editingTalent.value }
  }
  showEditTalentDialog.value = false
}

const filterTalents = () => {
  // 由computed属性自动处理过滤
}

// 个人中心方法
const saveProfile = () => {
  localStorage.setItem('zhuchiMinisterProfile', JSON.stringify(userProfile.value))
  alert('个人信息保存成功!')
}
</script>

<style scoped>
/* 基础样式参考caibo.vue，保持一致的设计风格 */
.zhuchi-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.management-main {
  display: flex;
  flex: 1;
  padding: 20px;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.left-nav {
  width: 200px;
  background-color: #fff;
  border-radius: 8px;
  padding: 15px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.nav-item {
  display: block;
  padding: 12px 20px;
  color: #333;
  text-decoration: none;
  transition: all 0.3s;
}

.nav-item:hover {
  background-color: #f0f7ff;
  color: #1890ff;
}

.nav-item.active {
  background-color: #1890ff;
  color: white;
}

.content-area {
  flex: 1;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.btn-primary {
  background-color: #1890ff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-secondary {
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #ddd;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.data-table th, .data-table td {
  padding: 12px 15px;
  border-bottom: 1px solid #f0f0f0;
}

.data-table th {
  background-color: #f5f7fa;
  font-weight: 500;
}

.operation-buttons {
  display: flex;
  gap: 8px;
}

.btn-view {
  background-color: #1890ff;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.btn-edit {
  background-color: #52c41a;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.no-data {
  text-align: center;
  color: #999;
  padding: 30px;
}

/* 会议相关样式 */
.meeting-actions {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.search-input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  flex: 0 0 300px;
}

.meeting-list {
  margin-top: 20px;
}

.meeting-item {
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}

.meeting-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.meeting-meta {
  display: flex;
  gap: 15px;
  color: #666;
  font-size: 14px;
}

.meeting-content {
  margin-bottom: 15px;
  color: #333;
}

.meeting-operations {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* 人才库样式 */
.talent-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  align-items: center;
}

.filter-select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.talent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.talent-card {
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
}

.talent-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto 15px;
  object-fit: cover;
}

.talent-info {
  color: #666;
  margin: 5px 0;
  font-size: 14px;
}

/* 个人中心样式 */
.profile-form {
  max-width: 600px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: inline-block;
  width: 100px;
  vertical-align: top;
}

.form-control {
  width: calc(100% - 110px);
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
</style>